<template>
	<xbd-pages-content :title="title">
		<template #content>
			<view class="content" :style="'minHeight:'+windowHeight+'px'">
				<xbd-title title="指标趋势分析"></xbd-title>
				<view class="chart">
					<chart-health-twoLine v-if="reqInfo.type === 'heightweight' && showChart.data.length !== 0"
						:chartData="showChart"></chart-health-twoLine>
					<chart-health-line v-else-if="reqInfo.type === 'temperature' && showChart.data.length !== 0"
						:chartData="showChart"></chart-health-line>
					<chart-health-threeLine v-else-if="reqInfo.type === 'pressure' && showChart.data.length !== 0"
						:chartData="showChart"></chart-health-threeLine>
					<chart-health-twoLine v-else-if="reqInfo.type === 'oxygen' && showChart.data.length !== 0"
						:chartData="showChart"></chart-health-twoLine>
					<chart-health-threeLine v-else-if="reqInfo.type === 'fat' && showChart.data.length !== 0"
						:chartData="showChart"></chart-health-threeLine>
					<img class="chart_img" v-if="showChart.data.length === 0"
						src="../../static/images/health/noCharts.png" alt="">
				</view>

				<xbd-title title="指标监测分析"></xbd-title>
				<!-- 身高 -->
				<view v-if="reqInfo.type === 'heightweight'" class="header">
					<view class="type1">{{titleList[0]}}</view>
					<view class="type5">{{titleList[1]}}</view>
					<view class="type4">{{titleList[2]}}</view>
				</view>
				<!-- 血压 -->
				<view v-else-if="reqInfo.type === 'pressure'" class="header">
					<view class="type1">{{titleList[0]}}</view>
					<view class="type2">{{titleList[1]}}</view>
					<view class="type3">{{titleList[2]}}</view>
					<view class="type4">{{titleList[3]}}</view>
				</view>
				<!-- 体温 -->
				<view v-else-if="reqInfo.type === 'temperature'" class="header">
					<view class="type1">{{titleList[0]}}</view>
					<view class="type4">{{titleList[1]}}</view>
				</view>
				<!-- 血脂 -->
				<view v-else-if="reqInfo.type === 'oxygen'" class="header">
					<view class="type1">{{titleList[0]}}</view>
					<view class="type5">{{titleList[1]}}</view>
					<view class="type4">{{titleList[2]}}</view>
				</view>
				<!-- 体脂 -->
				<view v-else-if="reqInfo.type === 'fat'" class="header">
					<view class="type1">{{titleList[0]}}</view>
					<view class="type2">{{titleList[1]}}</view>
					<view class="type3">{{titleList[2]}}</view>
					<view class="type4">{{titleList[3]}}</view>
				</view>

				<uni-list>
					<!-- 身高 -->
					<view v-if="reqInfo.type ==='heightweight'">
						<view class="conter2" v-for="(item,index) in showList" :key="index">
							<view class="type1">{{item[0] || '-'}}</view>
							<view class="type5">{{item[1] || '-'}}</view>
							<view class="type4">{{item[2] || '-'}}</view>
						</view>
					</view>

					<!-- 血压 -->
					<view v-else-if="reqInfo.type ==='pressure'">
						<view class="conter2" v-for="(item,index) in showList" :key="index">
							<view class="type1">{{item[0] || '-'}}</view>
							<view class="type2">{{item[1] || '-'}}</view>
							<view class="type3">{{item[2] || '-'}}</view>
							<view class="type4">{{item[3] || '-'}}</view>
						</view>
					</view>

					<!-- 体温 -->
					<view v-else-if="reqInfo.type ==='temperature'">
						<view class="conter2" v-for="(item,index) in showList" :key="index">
							<view class="type1">{{item[0] || '-'}}</view>
							<view class="type4">{{item[1] || '-'}}</view>
						</view>
					</view>

					<!-- 血氧 -->
					<view v-else-if="reqInfo.type ==='oxygen'">
						<view class="conter2" v-for="(item,index) in showList" :key="index">
							<view class="type1">{{item[0] || '-'}}</view>
							<view class="type4">{{item[1] || '-'}}</view>
							<view class="type4">{{item[2] || '-'}}</view>
						</view>
					</view>

					<!-- 体脂 -->
					<view v-else-if="reqInfo.type ==='fat'">
						<view class="conter2" v-for="(item,index) in showList" :key="index">
							<view class="type1">{{item[0] || '-'}}</view>
							<view class="type2">{{item[1] || '-'}}</view>
							<view class="type3">{{item[2] || '-'}}</view>
							<view class="type4">{{item[3] || '-'}}</view>
						</view>
					</view>
					<xbd-null-list v-if="!showList.length"></xbd-null-list>
					<!-- 是否需要上拉加载 -->
					<!-- <xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more> -->
				</uni-list>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import {
		Health
	} from '@/api/index.js';
	import uploadImage from '../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue';
	export default {
		components: {
			uploadImage
		},
		data() {
			return {
				title: '',
				check: 0,
				windowHeight: 0,
				// isLoadMore: false,
				showList: [],
				showChart: {},
				showCard: '',
				reqInfo: {
					type: '',
					page: 0,
					perpage: 10
				},
				titleList: [],
				itemListL: [],
				weigthChart: {
					name: ['身高', '体重'],
					unit: ['cm', 'kg'],
					color: ['#457AFF', '#39d4d1'],
					x: 'y',
					y: ['x', 'series'],
					data: []
				},
				pressChart: {
					name: ['舒张压','收缩压','脉率'],
					unit: ['', 'bpm',''],
					color: ['#457AFF', '#A0BCFE', '#39d4d1'],
					x: 'y',
					y: ['x', 'series'],
					data: []
				},
				fatChart: {
					name: [ '肌肉率', '水份率','脂肪率',],
					unit: ['%', '%', '%'],
					color: ['#457AFF', '#A0BCFE', '#39d4d1'],
					x: 'y',
					y: ['x', 'series'],
					data: []
				},
				oxygenChart: {
					name: ['脉率', '血氧'],
					unit: ['bpm', '%'],
					color: ['#457AFF', '#A0BCFE'],
					x: 'y',
					y: ['x', 'series'],
					data: [
					]
				},
				temperatureChart: {
					name: '体温',
					unit: '℃',
					color: '#457AFF',
					x: 'y',
					y: 'x',
					data: []
				},
			}
		},
		methods: {
			loadmore() {
				this.statusNum = 0;
				this.isLoadMore = true;

			},
			// 初始化
			async init() {
				const list = [
					Health.getChartList(this.reqInfo.type),
					Health.getTypeList(this.reqInfo),
				]
				this.$showLoading('加载中');
				Promise.all(list).then(res => {
					uni.hideLoading();
					switch (this.reqInfo.type) {
						case 'heightweight':
							this.weigthChart.data = res[0].data.list;
							break;
						case 'temperature':
							this.temperatureChart.data = res[0].data.list;
							console.log(this.temperatureChart.data)
							break;
						case 'pressure':
							this.pressChart.data = res[0].data.list;
							console.log(this.pressChart.data)
							break;
						case 'oxygen':
							this.oxygenChart.data = res[0].data.list;
							console.log(this.oxygenChart)
							break;
						case 'fat':
							this.fatChart.data = res[0].data.list;
							break;
					}
					this.titleList = res[1].data.title
					this.showList = res[1].data.list

				}).catch(err => {
					// this.$showToast(err);
				})

			},
		},
		// 触底加载
		onReachBottom() {
			this.loadmore();

		},
		onLoad(res) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
			switch (res.type) {
				case 'weight':
					this.title = '身高体重';
					this.reqInfo.type = 'heightweight';
					this.showChart = this.weigthChart
					break;
				case 'temperature':
					this.title = '体温检测';
					this.reqInfo.type = 'temperature';
					this.showChart = this.temperatureChart
					break;
				case 'press':
					this.title = '血压检测';
					this.reqInfo.type = 'pressure';
					this.showChart = this.pressChart
					break;
				case 'oxygen':
					this.title = '血氧检测';
					this.reqInfo.type = 'oxygen';
					this.showChart = this.oxygenChart
					break;
				case 'fat':
					this.title = '体脂检测';
					this.reqInfo.type = 'fat';
					this.showChart = this.fatChart
					break;
			}
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.init()

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-item__extra-text {
		color: #39D4D1;
		font-size: 28rpx;
	}

	::v-deep .data-v-296a3d7e {
		color: #39D4D1;
	}

	::v-deep .uni-list-item__content-title {
		font-size: 32rpx;
	}

	::v-deep .uni-list--border-bottom.data-v-5009d455 {
		background-color: #FFFFFF;
	}

	.content {
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #FFFFFF;

		.chart {
			margin: 20px 0 20px -24rpx;
			width: 720rpx;
			height: 600rpx;

			.chart_img {
				width: 508rpx;
				height: 426rpx;
				margin-left: 100rpx;
				margin-top: 40rpx;
			}
		}

		.header {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #39D4D1;
			text-align: center;
			box-sizing: border-box;
			padding: 8px 0 8px 0;
			background-color: #F8F8F8;
			white-space: nowrap;

			.type1 {
				font-size: 32rpx;
				width: 240rpx;
				margin-right: 80rpx;
			}

		}

		.coll {
			margin-top: 0 !important;
		}

		.type2 {
			width: 80rpx;
			margin-right: 40rpx;
		}

		.type3 {
			width: 80rpx;
			margin-right: 40rpx;
		}

		.type4 {

			width: 130rpx;
		}

		.type5 {

			width: 150rpx;
		}

		.type6 {

			width: 240rpx;
		}

		.conter {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999999;
			align-items: center;
			text-align: center;
			box-sizing: border-box;
			// padding: 10px 0 ;
			// border-bottom: 1px solid #D9D9D9;
			white-space: nowrap;

			.type1 {
				font-size: 24rpx;
				width: 230rpx;
				margin-right: 80rpx;
			}
		}

		.conter2 {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999999;
			align-items: center;
			text-align: center;
			box-sizing: border-box;
			padding: 10px 0;
			border-bottom: 1px solid #D9D9D9;
			white-space: nowrap;

			.type1 {
				font-size: 24rpx;
				width: 230rpx;
				margin-right: 80rpx;
			}
		}

		.fit {
			position: relative;
			text-align: left;

			.blue {
				z-index: 999;
				position: absolute;
				top: 32rpx;
				left: 6rpx;
				height: 20rpx;
				border-left: 6rpx solid #457AFF;
			}
		}


	}
</style>
